<!-- 成员权限 -->
<template>
    <div id="app">
      <div class="head">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/ProjectMembers' }">成员管理</el-breadcrumb-item>
          <el-breadcrumb-item>项目成员</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content">
          <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span style="font-weight:600;">管理员</span>
              <el-button>新增</el-button>
            </div>
            <div class="cardContent">
              <el-card shadow="hover">
                <div class="userCardContent">
                  <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                  <div class="userInfoContent">
                      <span>小刘.</span>
                      <span>liuyao1221</span>
                  </div>
                  <div class="buttonView">
                    <el-button type="text">修改</el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </el-card>
          <el-card shadow="hover" style="margin-top:20px">
            <div slot="header" class="clearfix">
              <span style="font-weight:600;">项目成员</span>
              <el-button>新增</el-button>
            </div>
                <el-table
                  :data="tableData" border style="width: 100%">
                  <el-table-column
                    prop="userName"
                    label="成员姓名"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="operation"
                    label="运营者"
                    width="180">
                    <div slot-scope="scope">
                      <i class="el-icon-check" v-show="scope.row.operation==1"></i>
                    </div>
                  </el-table-column>
                  <el-table-column
                    prop="exploitation"
                    label="开发者">
                    <div slot-scope="scope">
                      <i class="el-icon-check" v-show="scope.row.exploitation==1"></i>
                    </div>
                  </el-table-column>
                  <el-table-column
                    prop="data"
                    label="数据分析者">
                    <div slot-scope="scope">
                      <i class="el-icon-check" v-show="scope.row.data==1"></i>
                    </div>
                  </el-table-column>
                  <el-table-column
                    prop="test"
                    label="测试人员">
                    <div slot-scope="scope">
                      <i class="el-icon-check" v-show="scope.row.test==1"></i>
                    </div>
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="100">
                    <div slot-scope="scope">
                      <el-button type="text" size="small">查看</el-button>
                      <el-button type="text" size="small">编辑</el-button>
                    </div>
                  </el-table-column>
                </el-table>
                <el-pagination style="margin-top:20px;" 
                background 
                layout="prev, pager, next" 
                :total=package
                @current-change="schoolInfoPage"
                >
                </el-pagination>
          </el-card>
      </div>
    </div>
  </template>
  <script>
      
  export default({
    data() {
      // todo
      return {
        tableData:[{
          userName:'小刘.',
          data:1,
          test:1,
          exploitation:1,
          operation:1
        }],
        package:100
      }
    },
    mounted(){
      console.log(this.tableData.length);
      this.package=this.tableData.length*10;
    }
  })
  </script>
      
  <style scoped>
    .el-icon-check{
      font-weight: 700;
      color: rgb(22, 141, 9);
    }
    .el-card{
      border-radius: 20px;
    }
    .clearfix
    {
      width: 100%;
      display: flex;
      justify-content:space-between;
      align-items: center;
    }
    .clearfix .el-button
    {
      float: right;
    }
    .cardContent .el-card
    {
      width: 20%;
    }
    .userCardContent
    {
      width: 100%;
      display: flex;
    }
    .userInfoContent{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      margin-left: 15px;
    }
    .userInfoContent span{
      text-align: left;
    }
    .userCardContent .buttonView{
      margin-left: 20px;
    }

  </style>